<!doctype html>
<html>

<head>
		<meta charset="utf-8">
		<title>赛事照片查询</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet"  type="text/css" href="css/iconfont.css">
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
		<style>
					* {
					    touch-action: pan-y;
					}
					body{
						background-color: #FFFFFF;
					}
					.mui-control-content {
						background-color: white;
						min-height: 50rem;
					}
					.mui-control-content .mui-loading {
						margin-top: 3.125rem;
					}
					.mui-table-view .mui-media-object{
						height: 6.25rem;
						max-width: 8.125rem;
					}
					.mui-bar-nav{
						position: absolute;
							background-color: #e94709;
							height: 9%;
		
					}
					.top-content{
						position: absolute;
						width: 100%;
						font-size:0.625rem;
						}
						.top-content img{
							width: 100%;					
								}
						.top-message{
							position: absolute;
							    width: 10%;
							    right: 0%;
								top: 0.3125rem;
						}
						.top-return {
						position: absolute;
						    width: 10%;
						    top: 10px;		
								}
								.top-return img{
								    width: 75%;					
										}
						.mui-bar-nav .mui-title{
								color: #FFFFFF;
						}
						
						.top-logo {
						position: absolute;
						    width: 10%;
							left: 28%;
							top: 0.1875rem;			
								}
								.top-logo img{
								    width: 90%;					
										}					
					.mui-input-row{
						overflow: unset;
						left: 10%;
					}
					
					.mui-search input[type=search] {
						      background-color: #f0774a;
						      width: 70%;
						      border-radius: 3.125rem;
						      height: 2.5625rem;
							  color: #ffffff;
					}
					.mui-active::before{
						color: #FFFFFF;
					}
					.mui-search .mui-placeholder{
						color: #595757;	
						line-height: 2.5rem;
						font-size: 0.5375rem;
						width: 45%;
						color: #FFFFFF;
						}	
					.search-icon{
						background-color: #fad6c8;
						    position: absolute;
						    top: 0.375rem;
						    right: 30%;
						    width: 15%;
						    text-align: center;
						    border: 0;
						    height: 2.5625rem;
						    color: #e94709;
						    border-radius: 1.25rem;
						    overflow: hidden;
					}	
					.mui-slider{
						z-index: 15;
						margin-top:15% ;
						overflow: unset;
					}
					.mui-slider .mui-slider-group .mui-slider-item img{
						    width: 100%;
					}
					.mui-indicator .mui-active{
						background-color:#000000;
					}
					.mui-search .mui-placeholder{
						color: #FFFFFF;			
						}			
					.mui-search .mui-placeholder .mui-icon{
						color: #FFFFFF;
					    line-height: 1.875rem;
					    margin-left: -3.125rem;
					}									
						.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
							color: #585858;
							border-bottom: 0;
						}
						
						.mui-bar-tab .mui-tab-item.mui-active{
							color: #ea4609;
						}
		.mui-bar-nav~.mui-content{
			margin-bottom: 10%;
			margin-top: 5%;
		}
		.mui-table-view .mui-media-object{
			max-width: 40%;
		}
		.mui-content{
			background-color: #FFFFFF;
		}
		.addtime{
			padding-top: 0.625rem;
			font-size: 0.625rem;
		}
		.now-recom{
			    position: absolute;
			    top: 33%;
				height: 50rem;
			    width: 100%;
		}
		.now-more{
			color: #8f8f94;
		}
		.now-list{
			width: 95%;
			margin-left: 5%;
		}
		.now-item {
				width: 100%;
			    margin-right: 5%;
		}
		.now-item img{
			width: 95%;
			height: 8rem;
		}
	.bottom-remind{
		    width: 100%;
		    text-align: center;
		    padding-top: 10%;
			padding-bottom: 20%;
		    font-size: 15px;
		    color: #969696;
	}
</style>
		<header class="mui-bar mui-bar-nav">
			<div class="top-content">
				<a class="top-return mui-action-back"><img src="images/return.png" ></a>
				<div class="mui-input-row mui-search">
					<input type="search" class="mui-input-clear" placeholder="搜索照片">
					<button  onclick="location.href='no.html';"  type="button" class="search-icon">搜索</a>
				</div>				
				
					
			</div>			
		</header>
		<div class="mui-slider">
		  <div class="mui-slider-group mui-slider-loop">
		    <!-- 支持循环，需要重复图片节点 -->
			<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/introduction.png" /></a></div>
		    <div class="mui-slider-item"><a href="#"><img src="images/cooper.png" /></a></div>
			<div class="mui-slider-item"><a href="#"><img src="images/recruit.png" /></a></div>
			<div class="mui-slider-item"><a href="#"><img src="images/introduction.png" /></a></div>
		    <!-- 支持循环，需要重复图片节点 -->
		    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/cooper.png" /></a></div>
		  </div>
		</div>
		<div class="now-recom">
			<p style="padding: 3% 5% ;font-size: 15px;background: #eeeeee;">
			<span class="now-title">精彩播放</span>
			<a href="photosearch.html" class="now-more"><span  style="float: right;">更多></span>	 </a>
			</p>
			<div class="now-list">
				<div  class="now-item">
					<a href="photosearch.html">
						<img src="images/introduction.png" >
						<p><span>2020泰国清迈</span><span style="float: right; margin-right: 5%;">2016-02-01</span></p>
					</a>
				</div>
				<div  class="now-item">
					<a href="photosearch.htmlphotosearch.html">
						<img src="images/introduction.png" >
						<p><span>2020泰国清迈</span><span style="float: right; margin-right: 5%;">2016-02-01</span></p>
					</a>
				</div>
				<div  class="now-item">
					<a href="photosearch.html">
						<img src="images/introduction.png" >
						<p><span>2020泰国清迈</span><span style="float: right; margin-right: 5%;">2016-02-01</span></p>
					</a>
				</div>
				<div  class="now-item">
					<a href="photosearch.html">
						<img src="images/introduction.png" >
						<p><span>2020泰国清迈</span><span style="float: right; margin-right: 5%;">2016-02-01</span></p>
					</a>
				</div>					
			</div>
			<div class="bottom-remind">已显示全部内容</div>
		</div>
	<!-- 公共底部start -->
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item " href="index.html">
			<span class="mui-icon iconfont icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item mui-active" href="event.html">
			<span class="mui-icon iconfont icon-qizhi"></span>
			<span class="mui-tab-label">赛事</span>
		</a>
		<a class="mui-tab-item" href="grade.html">
			<span class="mui-icon iconfont icon-svg"></span>
			<span class="mui-tab-label">成绩</span>
		</a>
		<a class="mui-tab-item" href="my.html">
			<span class="mui-icon iconfont icon-copy"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
		<!-- 公共底部end -->
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		var slider = mui(".mui-slider");
	
				slider.slider({
					interval: 3000
				});
		
			mui('.mui-bar').on('tap','a',function(){
				document.location.href=this.href;
			})
		</script>
	
	</body>
	
</html>
